import React, { Component } from "react";
import { Input, Form, Button, Spin } from "antd";
import { messages } from "share/common";
import "styles/supplier-management/airline-config/recidence-form.scss";

const FormItem = Form.Item;
import Selector from "components/selector";
import config from "config";
import HotelServer from "../hotel-server";

@Form.create()
class ResidenceForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formItem: {
        url: `${config.baseUrl}/open/search/api/amap/cityKeywordsSearch?subDistrict=0`,
        label: "name",
        key: "adcode",
        searchKey: "keywords",
        listKey: "body",
      },
      residenceItem: {
        url: `${config.baseUrl}/open/search/api/amap/keywordsSearch`,
        label: "name",
        key: "location",
        searchKey: "keywords",
        listKey: "body",
      },
      params: {
        name: "",
      },
      currentCode: "",
      currentLngLat: "",
      editData: {},
      loading: false,
    };
  }

  componentWillMount() {
    const { params } = this.state;
    params.name = this.props.params.cityName || "";
    this.setState({
      editData: this.props.params,
      currentCode: this.props.params.cityCode || "",
      params,
    });
  }

  onSubmitEdit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      let optionData = {
        companyOid: this.props.params.companyOID,
        cityCode: values.cityName.adcode,
        cityName: values.cityName.name,
        locationName: values.locationName,
        location: values.location.name,
        lngLat: values.lngLat,
      };
      console.log(optionData);
      HotelServer(this)
        .addResidence(optionData)
        .then((res) => {
          if (res.data.code === 200) {
            this.props.close(true);
          }
        });
    });
  };

  onCancelEdit = () => {
    this.props.close();
  };

  onCitySelect = (city) => {
    const { params } = this.state;
    params.name = city.name;
    this.setState({ params, currentCode: city.adcode });
  };

  onCityFilter = (citys) => {
    return citys.level === "city";
  };

  onLocationChange = (location) => {
    this.props.form.setFieldsValue({ lngLat: location.location });
  };

  render() {
    const { editData, loading, formItem, residenceItem, params, currentCode, currentLngLat } = this.state;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <div className="residence-form">
        <Spin spinning={loading}>
          <Form className="new-form">
            <FormItem label={messages("supplier-1.key466") /*城市*/} {...formLayout} style={{ marginBottom: 16 }}>
              {getFieldDecorator("cityName", {
                initialValue: editData.cityName ? { name: editData.cityName, adcode: editData.cityCode } : "",
                rules: [
                  {
                    required: true,
                    message: messages("common.select") /*请选择*/,
                  },
                ],
              })(<Selector onChange={this.onCitySelect} entity filter={this.onCityFilter} selectorItem={formItem} />)}
            </FormItem>
            <FormItem label={messages("supplier-1.key467") /*常驻地名称*/} {...formLayout} style={{ marginBottom: 16 }}>
              {getFieldDecorator("locationName", {
                initialValue: editData.locationName || "",
                rules: [
                  {
                    required: true,
                    message: messages("supplier-1.key103") /*请输入temp2*/,
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label={messages("supplier-1.key468") /*常驻地*/} {...formLayout} style={{ marginBottom: 16 }}>
              {getFieldDecorator("location", {
                initialValue: editData.location ? { name: editData.location, location: editData.lngLat } : "",
                rules: [
                  {
                    required: true,
                    message: messages("common.select") /*请选择*/,
                  },
                ],
              })(
                <Selector
                  disabled={!currentCode}
                  onChange={this.onLocationChange}
                  entity
                  params={params}
                  selectorItem={residenceItem}
                />
              )}
            </FormItem>
            <FormItem
              label={messages("supplier-1.key469") /*常驻地经纬度*/}
              {...formLayout}
              style={{ marginBottom: 16 }}
            >
              {getFieldDecorator("lngLat", {
                initialValue: editData.lngLat || "",
              })(<Input disabled />)}
            </FormItem>
          </Form>
        </Spin>
        <div className="affix-bottom">
          <Button type="primary" onClick={this.onSubmitEdit} loading={loading}>
            {messages("common.ok") /*确定*/}
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={this.onCancelEdit}>{messages("common.cancel") /*取消*/}</Button>
        </div>
      </div>
    );
  }
}

export default ResidenceForm;
